<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Image Only Viewer Test</title>

  <link rel="stylesheet" type="text/css" href="../../../src/widgets/themes/default/kekule.css" />

  <script src="../../_libs/Three.js"></script>
  <script src="../../_libs/raphael-min.2.0.1.js"></script>
  <script src="../../_libs/raphael.export.js"></script>
  <script src="../../../src/kekule.js?modules=algorithm,chemWidget,openbabel&min=false"></script>
  <script>
    Kekule.Widget.AutoLauncher.enabled = !false;
    function launchViewer()
    {
      var elem = document.getElementById('viewer1');
      Kekule.Widget.autoLauncher.executeOnElem(document, elem);
    }
    function setChemObj()
    {
      var viewer = Kekule.Widget.getWidgetById('viewer1');
      //viewer.setChemObj();
    }
    function setImage()
    {
      imgElem.src = '../../../release/themes/default/sprite/defaultColor.png';
      console.log('Image complete state right after change src', imgElem.complete);
    }
    function setImageData()
    {
      imgElem.src = '';
      console.log('Image complete state right after change src data', imgElem.complete);
      (function(){
        console.log('Image complete state delay after change src data', imgElem.complete);
      }).delay();
    }
    var viewer1, viewer2;
    var imgElem;
    Kekule.X.domReady(function(){
      viewer1 = Kekule.Widget.getWidgetById('viewer1');
      viewer2 = Kekule.Widget.getWidgetById('viewer2');

      imgElem = document.getElementById('img1');
      console.log('Image complete at DOM ready', imgElem.complete);
      imgElem.onload = function()
      {
        console.log('Image loaded, complete state is', imgElem.complete);
      }
    });
  </script>
</head>
<body>
  <button onclick="launchViewer()">Launch</button>
  <button onclick="setImage()">Change image</button>
  <button onclick="setImageData()">Change image data</button>
  <br />

  <div id="viewer1" data-widget="Kekule.ChemWidget.Viewer2D"
       data-auto-size="true" data-predefined-setting="basic"
       data-chem-obj='{"id":"g1","coordPos2D":21,"coordPos3D":0,"coord2D":{"x":10.45493310546875,"y":41.57706689453125,"__type__":"object"},"size2D":{"x":4.576000000000022,"y":1.8239999999999839,"__type__":"object"},"src":"","__type__":"Kekule.ImageBlock"}'></div>

  <!--
  <div id="viewer2" data-widget="Kekule.ChemWidget.Viewer2D"
    data-auto-size="true"  data-predefined-setting="basic"
    data-chem-obj='{"info":{"generator":"ChemDraw","date":{"__type__":"date","date":"Mon, 02 Jul 2012 05:38:46 GMT"},"__type__":"object"},"coordPos2D":0,"coordPos3D":0,"renderOptions":{"expanded":true,"__type__":"object"},"charge":0,"parity":null,"ctab":{"nodes":[{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"coord2D":{"x":-0.5275,"y":0.2473,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"coord2D":{"x":-0.8131,"y":-0.5266,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"coord2D":{"x":-0.2856,"y":-1.161,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"coord2D":{"x":0.5275,"y":-1.0213,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"coord2D":{"x":0.8131,"y":-0.2473,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"coord2D":{"x":0.2856,"y":0.387,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","coordPos2D":0,"coordPos3D":0,"coord2D":{"x":0.5712,"y":1.161,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"O"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Bond","coordPos2D":0,"coordPos3D":0,"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[0,1]},{"__type__":"Kekule.Bond","coordPos2D":0,"coordPos3D":0,"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[1,2]},{"__type__":"Kekule.Bond","coordPos2D":0,"coordPos3D":0,"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[2,3]},{"__type__":"Kekule.Bond","coordPos2D":0,"coordPos3D":0,"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[3,4]},{"__type__":"Kekule.Bond","coordPos2D":0,"coordPos3D":0,"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[4,5]},{"__type__":"Kekule.Bond","coordPos2D":0,"coordPos3D":0,"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedObjs":[5,0]},{"__type__":"Kekule.Bond","coordPos2D":0,"coordPos3D":0,"bondType":"covalent","bondOrder":2,"electronCount":4,"isInAromaticRing":false,"connectedObjs":[5,6]}],"__type__":"Kekule.StructureConnectionTable"},"name":"cyclohextone.mol","__type__":"Kekule.Molecule"}'
  ></div>
  -->
  <div id="viewer2" data-widget="Kekule.ChemWidget.Viewer2D"
       data-auto-size="true" data-predefined-setting="basic"
       data-chem-obj='{"id":"g1","coordPos2D":21,"coordPos3D":0,"coord2D":{"x":10.45493310546875,"y":41.57706689453125,"__type__":"object"},"size2D":{"x":4.576000000000022,"y":1.8239999999999839,"__type__":"object"},"src":"https://img.supmil.net/data/attachment/forum/201703/09/152427tqt5jvqkcqvivrcp.jpg","__type__":"Kekule.ImageBlock"}'></div>
  <div>
    <img id="img1" src="../../../release/themes/default/sprite/chemWidgetColor.png" />
  </div>
</body>
</html>